import React, {PureComponent, Fragment} from 'react';
import {Button, Divider, Form, Icon, message, Popconfirm, Table, Tooltip, Alert} from 'antd';
import {connect} from 'dva';

@connect(state => ({
  businessUser: state.businessUser,
}))
class StandardTable extends PureComponent {
  state = {
    selectedRowKeys: []
  };

  handleOnClick = (record, key) => {
    const {onEditItem, dispatch, businessUser} = this.props;
    if (key === "edit") {
      onEditItem(record, true)
    } else if (key === "del") {
      businessUser.pagination = {
        page: 1
      };
      dispatch({
        type: 'businessUser/remove',
        payload: {id: record.id},
        callback: (resultData) => {
          if (resultData.resultCode === "1") {
            message.success('删除成功');
          } else {
            message.success('删除失败');
          }
        },
      });
    }
  }

  handleRowSelectChange = (selectedRowKeys, selectedRows) => {
    if (this.props.onSelectRow) {
      this.props.onSelectRow(selectedRows);
    }
    this.setState({selectedRowKeys});
  }

  handleTableChange = (pagination, filters, sorter, ...rest) => {
    const { onChange } = this.props;

    if (onChange) {
      onChange(pagination, filters, sorter, ...rest);
    }
  };

  /**
   * 页码更改
   * */
  handPageChange = (current, pageSize) => {
    const {businessUser, dispatch} = this.props;
    businessUser.pagination = {
      page: current,
      pageSize: pageSize,
    };
    dispatch({
      type: 'businessUser/fetch',
    });
  }

  /**
   * 刷新
   * */
  refresh = () => {
    const {dispatch} = this.props;
    dispatch({
      type: 'businessUser/fetch',
    });
  }

  render() {
    const {selectedRowKeys} = this.state;
    const {data, data: {rows, object}, loading} = this.props;

    const pagination = {
      pageSizeOptions: ['5', '10', '15', '20'],
      total: data.total,
      defaultCurrent: 1,
      pageSize: data.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
      showTotal: total => <><span onClick={()=>this.refresh()} style={{cursor:'pointer', color:'#40a9ff', paddingRight:10}}><Tooltip placement="top" title='刷新'><span><Icon type="reload" /></span></Tooltip></span><span> 共 {total} 条</span></>,
      onShowSizeChange: (current, pageSize) => {
        this.handPageChange(current, pageSize)
      },
      onChange: (current, pageSize) => {
        this.handPageChange(current, pageSize)
      },
    };

    const columns = [
      {
        title: '序号',
        render:(text, record, index) => {
          return (index+1)+((data.page-1)*data.pageSize)
        }
      },
      {
        title: '机器码',
        dataIndex: 'machineCode',
        align:'center'
      },
      {
        title: '激活状态',
        dataIndex: 'state',
        align:'center',
        render:(val)=>{
          switch (val){
            case 'NO_ACTIVATE': return <span style={{color:'#f10610'}}>未激活</span>;
            case 'ACTIVATE': return <span style={{color:'#4869f1'}}>激活</span>;
            case 'OUT_TIME': return <span style={{color:'#f19222'}}>超期</span>;
          }
        }
      },
      {
        title: '环境',
        dataIndex: 'environment',
        align:'center',
        render:(val)=>{
          switch (val){
            case 'WC': return <span style={{color:'#f10610'}}>微信</span>;
            case 'TT': return <span style={{color:'#f19222'}}>抖音</span>;
            case 'ALL': return <span style={{color:'#4869f1'}}>全部</span>;
          }
        }
      },
      {
        title: '截止时间',
        dataIndex: 'endTime',
        align:'center'
      },
      {
        title: '推荐人',
        dataIndex: 'recommend',
        align:'center'
      },
      {
        title: '创建人',
        dataIndex: 'createName',
        align:'center',
        sorter: true
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        align:'center',
        sorter: true
      },
      {
        title: '操作',
        width: 130,
        align:'center',
        render: (record) => (
          <div style={{width: 125}}>
            <Tooltip placement="top" title='修改'>
              <Button style={{padding: 0}} type="link" onClick={() => this.handleOnClick(record, 'edit')}><span><Icon
                type="edit"/></span></Button>
            </Tooltip>
            <Divider type="vertical"/>
            <Popconfirm title="确定要删除该菜单吗？" onConfirm={() => this.handleOnClick(record, 'del')}>
              <Tooltip placement="top" title='删除'>
                <Button style={{padding: 0}} type="link"><span style={{color: '#f13d74'}}><Icon
                  type="delete"/></span></Button>
              </Tooltip>
            </Popconfirm>
          </div>
        ),
      },
    ];

    const rowSelection = {
      selectedRowKeys,
      onChange: this.handleRowSelectChange,
      getCheckboxProps: record => ({
        disabled: record.disabled,
      }),
    };

    return (
      <>
      <div style={{marginBottom:16}}>
        <Alert
          message={
            <Fragment>
              已使用{' '}
              <a
                style={{
                  fontWeight: 600,
                }}
              >
                {object&&object.usedNum? object.usedNum:0}
              </a>{' '}
              个&nbsp;&nbsp;
              <span
                style={{
                  marginLeft: 8,
                }}
              >
                总计&nbsp;
                <span
                  style={{
                    fontWeight: 600,
                  }}
                >
                      {object&&object.total? object.total:0}
                    </span>
                  </span>
            </Fragment>
          }
          type="info"
          showIcon
        />
      </div>
      <Table
        size="small"
        loading={loading}
        rowKey={record => record.id}
        rowSelection={rowSelection}
        dataSource={rows}
        columns={columns}
        pagination={pagination}
        onChange={this.handleTableChange}
      />
      </>
    );
  }
}

export default StandardTable;
